<template>
    <div class="child-router-view third">
        <el-menu class="third-menu" mode="horizontal" :router="true" :default-active="defaultActivePath">
            <Items :items="items"/>
        </el-menu>
        <router-view class="view"/>
    </div>
</template>

<style lang="scss" scoped>

.child-router-view.third{
    position: relative;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items: stretch;

    .third-menu{
        border: none;
        border-radius: 4px;
        margin-bottom: 15px;
    }
    
    > .view{
        flex:1;
        min-width:0;
        min-height:0;
    }

}

</style>

<script>

import {
	mapGetters
} from 'vuex' ;

import Items from '@/components/app/menu/Items' ;

export default {
  props: [
      "routes"
  ],

  components:{
      Items
  },

  computed:{
    ...mapGetters('Menu' , [
        'isCurrentPath',
        'single'
    ]),

    items(){

      let {
        single,
        routes
      } = this ;

      return single(routes) ;
    },

    defaultActivePath(){

        let {
            routes,
            isCurrentPath
        } = this,
        item = routes.find(({
            fullPath
        }) => isCurrentPath(fullPath)) ;

        if(item){

            return item.fullPath ;
        }
    }
  }
};
</script>